<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <title>云呼任务详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/callTask/viewCallTaskDetailNew.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/js/layui/module/formSelects/css/formSelects-v4.css}" />
    <link rel="stylesheet" th:href="@{/js/layui/module/dtree/dtree.css}" />
    <link rel="stylesheet" th:href="@{/js/layui/module/dtree/font/dtreefont.css}" />
</head>
<body>
<div class="layui-tab-content" id="tabContent">
    <div class="layui-tab-item layui-show">
        <form class="layui-form layui-row layui-col-space10">
            <div>
                <input id="callTaskId" th:value="${callTaskMap?.id}" type="hidden"/>
                <blockquote class="layui-elem-quote quoteBox" style="width: 100%;min-width: 620px;">
                    <div>
                        <span th:text="${callTaskMap?.taskName}" name="title"></span>
                        <span class="greed-span"
                              th:text="'进度'+${callTaskDetail==null?'未知':callTaskMap?.callProgress+'%'}">进度:12%</span>
                        <span class="greed-span"
                              th:text="'接通率'+${callTaskDetail==null?'未知':callTaskDetail?.connectedRate+'%'}">接通率:12%</span>
                        <!-- <span class="greed-span" th:text="'接通率'+${callTaskDetail==null?''}+'%'">接通率:12%</span>-->
                    </div>
                    <div class="small-tip-txt">
                        <div class="layui-inline" style="margin-left:10px;">
                            创建人:<span style="font-size: 14px;" name="title"
                                      th:text="${callTaskMap?.createUserName}"></span>
                        </div>
                        <div class="layui-inline" style="margin-left:30px;">
                            创建日期:<span style="font-size: 14px;" name="regData"
                                       th:text="${callTaskMap?.createTime}"></span>
                        </div>
                        <div class="layui-inline" style="margin-left:30px;">
                            话术:<span style="font-size: 14px;" name="type" th:text="${callTaskMap?.packageName}"></span>
                        </div>
                    </div>
                </blockquote>


                <div class="tablemian" style="width: 100%;min-width: 620px;">
                    <div class="layui-tab layui-tab-card" lay-filter="editPropTabA">
                        <ul class="layui-tab-title">
                            <li class="layui-this" id="callStaticsTab" lay-id="callStaticsTab">外呼详情</li>
                            <li id="callListTab" lay-id="callListTab" style="border-right: 1px solid #ccc;">通话详情</li>
                        </ul>
                        <div class="layui-tab-content" style="height: auto;">
                            <!-- 标签表 -->
                            <div class="layui-tab-item layui-show">
                                <div class="tabox">
                                    <div class="tabtit" style="height: auto;">
                                        <h5 style="text-align:left;padding-left: 5px;">客户关键词</h5>
                                    </div>
                                    <div>
                                        <th:block th:if="${tags!=null && #lists.size(tags)>0}">
                                            <div class="detailedmain">
                                                <div class="labelmain" style="height:auto">
                                                    <th:block th:each="row,rowStat:${tags}">
                                                            <span th:class="'span0'+(${rowStat.index} % 10)+' '+${row.someClass}"
                                                                  th:text="${row.tabValues}"></span>
                                                    </th:block>
                                                </div>
                                                <div style="clear:both;"></div>
                                            </div>
                                        </th:block>
                                        <th:block th:unless="${tags!=null && #lists.size(tags)>0}">
                                            <div style="padding: 15px 10px;">
                                                暂无关键词
                                            </div>
                                        </th:block>
                                    </div>
                                </div>
                                <div class="tabbox">
                                    <div class="tabcont">
                                        <ul>
                                            <li id="receptionStatusLi">
                                                <div class="tabox">
                                                    <div class="tabtit">
                                                        <h5>接听状况比例</h5>
                                                    </div>
                                                    <div id="receptionStatus" class="tabpic"></div>
                                                </div>
                                            </li>
                                            <li id="talkTimeLi">
                                                <div class="tabox">
                                                    <div class="tabtit">
                                                        <h5>通话时长比例</h5>
                                                    </div>
                                                    <div id="talkTime" class="tabpic"></div>
                                                </div>
                                            </li>
                                            <li id="callTurnsLi">
                                                <div class="tabox">
                                                    <div class="tabtit">
                                                        <h5>通话轮次比例</h5>
                                                    </div>
                                                    <div id="callTurns" class="tabpic"></div>
                                                </div>
                                            </li>

                                            <li id="customerLevellLi">
                                                <div class="tabox">
                                                    <div class="tabtit">
                                                        <h5>客户等级比例</h5>
                                                    </div>
                                                    <div id="customerLevel" class="tabpic"></div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="tablecont">
                                    <table class="layui-hide" id="callListTable" lay-filter="callListTable"
                                           style="height:505px; "></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </form>
</div>
</div>
<script type="text/javascript" th:inline="javascript">
    const baseUrl = [[${#servletContext.contextPath}]];
    var receptionStatusPieVos = [[${receptionStatusPieVos}]];
    var talkTimePieVos = [[${talkTimePieVos}]];
    var callTurnsPieVos = [[${callTurnsPieVos}]];
    var customerLevelPieVos = [[${customerLevelPieVos}]];
//    var callTaskDetail = [[${callTaskDetail}]];
//    console.log(JSON.stringify(callTaskDetail));
</script>
<script type="text/javascript" th:src="@{/js/jquery-1.7.2.min.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts-3.8.4/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/js/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/page/linkageCall/viewCallTaskDetail.js(v=${new java.util.Date().getTime()})}"></script>
<script type="text/javascript" th:src="@{/js/DataTableExtend.js}"></script>
<script type="text/javascript" th:src="@{/js/page/linkageCall/jquery.tagcanvas.js}"></script>
<script type="text/javascript"   th:src="@{/js/page/utils.js}"></script>
<script type="text/html" id="barDemo">
    <div>
        <a class="layui-btn layui-btn-xs" lay-event="view">查看详情</a>
    </div>
</script>
<script type="text/javascript">
    $(document).ready(function () {
        if (!$('#myCanvas').tagcanvas({
                textColour: '#000000',
                outlineThickness: 1,
                maxSpeed: 0.03,
                depth: 0.75
            })) {
            // TagCanvas failed to load
            $('#myCanvasContainer').hide();
        }
    });
</script>

</body>
</html>